baubs git - /page/blob.mu

Micron Document

baubs git

Node / mirrors / respira / files / src / components / ProgressMonitor.tsx

Displaying Raw • Download

src/components/ProgressMonitor.tsx fix/security-headers-and-csp (1084633b) Text, 20.21 KB

import { useRef, useEffect, useState, useMemo } from "react";

import { useShallow } from "zustand/react/shallow";

import { useMachineStore } from "../stores/useMachineStore";

import { usePatternStore } from "../stores/usePatternStore";

import {

CheckCircleIcon,

ArrowRightIcon,

CircleStackIcon,

PlayIcon,

CheckBadgeIcon,

ClockIcon,

PauseCircleIcon,

ExclamationCircleIcon,

ChartBarIcon,

ArrowPathIcon,

} from "@heroicons/react/24/solid";

import { MachineStatus } from "../types/machine";

import {

canStartSewing,

canStartMaskTrace,

canResumeSewing,

getStateVisualInfo,

} from "../utils/machineStateHelpers";

import { calculatePatternTime } from "../utils/timeCalculation";

export function ProgressMonitor() {

// Machine store

const {

machineStatus,

patternInfo,

sewingProgress,

isDeleting,

startMaskTrace,

startSewing,

resumeSewing,

} = useMachineStore(

useShallow((state) => ({

machineStatus: state.machineStatus,

patternInfo: state.patternInfo,

sewingProgress: state.sewingProgress,

isDeleting: state.isDeleting,

startMaskTrace: state.startMaskTrace,

startSewing: state.startSewing,

resumeSewing: state.resumeSewing,

})),

);

// Pattern store

const pesData = usePatternStore((state) => state.pesData);

const currentBlockRef = useRef<HTMLDivElement>(null);

const colorBlocksScrollRef = useRef<HTMLDivElement>(null);

const [showGradient, setShowGradient] = useState(true);

// State indicators

const isMaskTraceComplete =

machineStatus === MachineStatus.MASK_TRACE_COMPLETE;

const stateVisual = getStateVisualInfo(machineStatus);

// Use PEN stitch count as fallback when machine reports 0 total stitches

const totalStitches = patternInfo

? patternInfo.totalStitches === 0 && pesData?.penStitches

? pesData.penStitches.stitches.length

: patternInfo.totalStitches

: 0;

const progressPercent =

totalStitches > 0

? ((sewingProgress?.currentStitch || 0) / totalStitches) * 100

: 0;

// Calculate color block information from decoded penStitches

const colorBlocks = useMemo(() => {

if (!pesData || !pesData.penStitches) return [];

const blocks: Array<{

colorIndex: number;

threadHex: string;

startStitch: number;

endStitch: number;

stitchCount: number;

threadCatalogNumber: string | null;

threadBrand: string | null;

threadDescription: string | null;

threadChart: string | null;

}> = [];

// Use the pre-computed color blocks from decoded PEN data

for (const penBlock of pesData.penStitches.colorBlocks) {

const thread = pesData.threads[penBlock.colorIndex];

blocks.push({

colorIndex: penBlock.colorIndex,

threadHex: thread?.hex || "#000000",

threadCatalogNumber: thread?.catalogNumber ?? null,

threadBrand: thread?.brand ?? null,

threadDescription: thread?.description ?? null,

threadChart: thread?.chart ?? null,

startStitch: penBlock.startStitchIndex,

endStitch: penBlock.endStitchIndex,

stitchCount: penBlock.endStitchIndex - penBlock.startStitchIndex,

});

}

return blocks;

}, [pesData]);

// Determine current color block based on current stitch

const currentStitch = sewingProgress?.currentStitch || 0;

const currentBlockIndex = colorBlocks.findIndex(

(block) =>

currentStitch >= block.startStitch && currentStitch < block.endStitch,

);

// Calculate time based on color blocks (matches Brother app calculation)

const { totalMinutes, elapsedMinutes } = useMemo(() => {

if (colorBlocks.length === 0) {

return { totalMinutes: 0, elapsedMinutes: 0 };

}

const result = calculatePatternTime(colorBlocks, currentStitch);

return {

totalMinutes: result.totalMinutes,

elapsedMinutes: result.elapsedMinutes,

};

}, [colorBlocks, currentStitch]);

// Auto-scroll to current block

useEffect(() => {

if (currentBlockRef.current) {

currentBlockRef.current.scrollIntoView({

behavior: "smooth",

block: "nearest",

});

}

}, [currentBlockIndex]);

// Handle scroll to detect if at bottom

const handleColorBlocksScroll = () => {

if (colorBlocksScrollRef.current) {

const { scrollTop, scrollHeight, clientHeight } =

colorBlocksScrollRef.current;

const isAtBottom = scrollTop + clientHeight >= scrollHeight - 5; // 5px threshold

setShowGradient(!isAtBottom);

}

};

// Check initial scroll state and update on resize

useEffect(() => {

const checkScrollable = () => {

if (colorBlocksScrollRef.current) {

const { scrollHeight, clientHeight } = colorBlocksScrollRef.current;

const isScrollable = scrollHeight > clientHeight;

setShowGradient(isScrollable);

}

};

checkScrollable();

window.addEventListener("resize", checkScrollable);

return () => window.removeEventListener("resize", checkScrollable);

}, [colorBlocks]);

const stateIndicatorColors = {

idle: "bg-info-50 dark:bg-info-900/20 border-info-600",

info: "bg-info-50 dark:bg-info-900/20 border-info-600",

active: "bg-warning-50 dark:bg-warning-900/20 border-warning-500",

waiting: "bg-warning-50 dark:bg-warning-900/20 border-warning-500",

warning: "bg-warning-50 dark:bg-warning-900/20 border-warning-500",

complete: "bg-success-50 dark:bg-success-900/20 border-success-600",

success: "bg-success-50 dark:bg-success-900/20 border-success-600",

interrupted: "bg-danger-50 dark:bg-danger-900/20 border-danger-600",

error: "bg-danger-50 dark:bg-danger-900/20 border-danger-600",

danger: "bg-danger-50 dark:bg-danger-900/20 border-danger-600",

};

return (

Sewing Progress

</h3>

{sewingProgress && (

{progressPercent.toFixed(1)}% complete

</p>

)}

</div>

{/* Pattern Info */}

{patternInfo && (

Total Stitches

</span>

{totalStitches.toLocaleString()}

</span>

</div>

Total Time

</span>

{totalMinutes} min

</span>

</div>

Speed

</span>

{patternInfo.speed} spm

</span>

</div>

)}

{/* Progress Bar */}

{sewingProgress && (

<div

className="h-full bg-gradient-to-r from-accent-600 to-accent-700 dark:from-accent-600 dark:to-accent-800 transition-all duration-300 ease-out relative overflow-hidden after:absolute after:inset-0 after:bg-gradient-to-r after:from-transparent after:via-white/30 after:to-transparent after:animate-[shimmer_2s_infinite]"

style={{ width: \\`${progressPercent}%\\` }}

</div>

Current Stitch

</span>

{sewingProgress.currentStitch.toLocaleString()} /{" "}

{totalStitches.toLocaleString()}

</span>

</div>

Time

</span>

{elapsedMinutes} / {totalMinutes} min

</span>

</div>

)}

{/* State Visual Indicator */}

{patternInfo &&

(() => {

const iconMap = {

ready: (

active: (

waiting: (

complete: (

interrupted: (

error: (

};

return (

<div

className={\\`flex items-center gap-3 p-2.5 rounded-lg mb-3 border-l-4 ${stateIndicatorColors[stateVisual.color as keyof typeof stateIndicatorColors] || stateIndicatorColors.info}\\`}

{iconMap[stateVisual.iconName]}

</div>

{stateVisual.label}

</div>

{stateVisual.description}

</div>

);

})()}

{/* Color Blocks */}

{colorBlocks.length > 0 && (

Color Blocks

</h4>

<div

ref={colorBlocksScrollRef}

onScroll={handleColorBlocksScroll}

className="lg:absolute lg:inset-0 flex flex-col gap-2 lg:overflow-y-auto scroll-smooth pr-1 [&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar-track]:bg-gray-100 dark:[&::-webkit-scrollbar-track]:bg-gray-700 [&::-webkit-scrollbar-thumb]:bg-primary-600 dark:[&::-webkit-scrollbar-thumb]:bg-primary-500 [&::-webkit-scrollbar-thumb]:rounded-full"

{colorBlocks.map((block, index) => {

const isCompleted = currentStitch >= block.endStitch;

const isCurrent = index === currentBlockIndex;

// Calculate progress within current block

let blockProgress = 0;

if (isCurrent) {

blockProgress =

((currentStitch - block.startStitch) / block.stitchCount) *

100;

} else if (isCompleted) {

blockProgress = 100;

}

return (

<div

key={index}

ref={isCurrent ? currentBlockRef : null}

className={\\`p-2.5 rounded-lg border-2 transition-all duration-300 ${

isCompleted

? "border-success-600 bg-success-50 dark:bg-success-900/20"

: isCurrent

? "border-accent-600 bg-accent-50 dark:bg-accent-900/20 shadow-lg shadow-accent-600/20 animate-pulseGlow"

: "border-gray-200 dark:border-gray-600 bg-gray-300 dark:bg-gray-800/50 opacity-70"

}\\`}

role="listitem"

aria-label={\\`Thread ${block.colorIndex + 1}, ${block.stitchCount} stitches, ${isCompleted ? "completed" : isCurrent ? "in progress" : "pending"}\\`}

{/* Color swatch */}

<div

className="w-7 h-7 rounded-lg border-2 border-gray-300 dark:border-gray-600 shadow-md flex-shrink-0"

style={{

backgroundColor: block.threadHex,

...(isCurrent && { borderColor: "#9333ea" }),

}}

title={\\`Thread color: ${block.threadHex}\\`}

aria-label={\\`Thread color ${block.threadHex}\\`}

{/* Thread info */}

Thread {block.colorIndex + 1}

{(block.threadBrand ||

block.threadChart ||

block.threadDescription ||

block.threadCatalogNumber) && (

{" "}

(

{(() => {

// Primary metadata: brand and catalog number

const primaryMetadata = [

block.threadBrand,

block.threadCatalogNumber

? \\`#${block.threadCatalogNumber}\\`

: null,

]

.filter(Boolean)

.join(" ");

// Secondary metadata: chart and description

const secondaryMetadata = [

block.threadChart,

block.threadDescription,

]

.filter(Boolean)

.join(" ");

return [primaryMetadata, secondaryMetadata]

.filter(Boolean)

.join(" • ");

})()}

)

</span>

)}

</div>

{block.stitchCount.toLocaleString()} stitches

</div>

{/* Status icon */}

{isCompleted ? (

<CheckCircleIcon

className="w-5 h-5 text-success-600 flex-shrink-0"

aria-label="Completed"

) : isCurrent ? (

<ArrowRightIcon

className="w-5 h-5 text-accent-600 flex-shrink-0 animate-pulse"

aria-label="In progress"

) : (

<CircleStackIcon

className="w-5 h-5 text-gray-400 flex-shrink-0"

aria-label="Pending"

)}

</div>

{/* Progress bar for current block */}

{isCurrent && (

<div

className="h-full bg-accent-600 dark:bg-accent-500 transition-all duration-300 rounded-full"

style={{ width: \\`${blockProgress}%\\` }}

role="progressbar"

aria-valuenow={Math.round(blockProgress)}

aria-valuemin={0}

aria-valuemax={100}

aria-label={\\`${Math.round(blockProgress)}% complete\\`}

</div>

)}

</div>

);

})}

</div>

{/* Gradient overlay to indicate more content below - only on desktop and when not at bottom */}

{showGradient && (

)}

</div>

)}

{/* Action buttons */}

{/* Resume has highest priority when available */}

{canResumeSewing(machineStatus) && (

<button

onClick={resumeSewing}

disabled={isDeleting}

className="flex-1 flex items-center justify-center gap-1.5 px-3 py-2.5 sm:py-2 bg-primary-600 dark:bg-primary-700 text-white rounded font-semibold text-xs hover:bg-primary-700 dark:hover:bg-primary-600 active:bg-primary-800 dark:active:bg-primary-500 transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"

aria-label="Resume sewing the current pattern"

Resume Sewing

</button>

)}

{/* Start Sewing - primary action, takes more space */}

{canStartSewing(machineStatus) && !canResumeSewing(machineStatus) && (

<button

onClick={startSewing}

disabled={isDeleting}

className="flex-[2] flex items-center justify-center gap-1.5 px-3 py-2.5 sm:py-2 bg-primary-600 dark:bg-primary-700 text-white rounded font-semibold text-xs hover:bg-primary-700 dark:hover:bg-primary-600 active:bg-primary-800 dark:active:bg-primary-500 transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"

aria-label="Start sewing the pattern"

Start Sewing

</button>

)}

{/* Start Mask Trace - secondary action */}

{canStartMaskTrace(machineStatus) && (

<button

onClick={startMaskTrace}

disabled={isDeleting}

className="flex-1 flex items-center justify-center gap-1.5 px-3 py-2.5 sm:py-2 bg-gray-600 dark:bg-gray-700 text-white rounded font-semibold text-xs hover:bg-gray-700 dark:hover:bg-gray-600 active:bg-gray-800 dark:active:bg-gray-500 transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"

aria-label={

isMaskTraceComplete

? "Start mask trace again"

: "Start mask trace"

}

{isMaskTraceComplete ? "Trace Again" : "Start Mask Trace"}

</button>

)}

</div>

);

}

Served by rngit 1.3.3 - Generated in 0.03s